<script setup lang="ts">
import { ref, reactive, onMounted } from "vue";
import { searchWhois } from "@/api/search/index";

defineOptions({
  name: "SearchWhois"
});

const loading = ref(false);
const resultVisiable = ref(false);
const tableData = ref([]);
const queryForm = reactive({
  domain: "sina.com"
});

const resultKeys = {
  "Domain Name": "域名",
  "Registry Domain ID": "注册域名ID",
  "Registrar WHOIS Server": "WHOIS Server",
  "Registrar URL": "注册商URL",
  "Updated Date": "更新日期",
  "Creation Date": "注册日期",
  "Registry Expiry Date": "有效日期",
  Registrar: "注册商",
  "Registrar Abuse Contact Email": "联系邮箱",
  "Registrar Abuse Contact Phone": "联系电话",
  "Domain Status": "状态",
  "Name Server": "解析服务器"
};

onMounted(() => {});

function onQuery() {
  resultVisiable.value = false;
  loading.value = true;
  console.log(queryForm.domain);
  searchWhois(queryForm.domain).then(resp => {
    tableData.value = resp.data;
    console.log(resp);
    resultVisiable.value = true;
    loading.value = false;
  });
}
</script>

<template>
  <div>
    <h1>Whois信息查询</h1>
    <el-form :model="queryForm">
      <el-form-item>
        <el-input v-model="queryForm.domain" placeholder="输入域名一键查询" />
      </el-form-item>
      <el-button
        class="w-full mt-4"
        size="default"
        type="primary"
        :loading="loading"
        @click="onQuery()"
        >查询</el-button
      >
    </el-form>
    <el-divider />
    <div v-if="resultVisiable" class="result-container">
      <el-descriptions
        class="margin-top"
        :title="queryForm.domain + '查询结果'"
        :column="3"
        border
      >
        <el-descriptions-item
          v-for="(desc, key, index) in resultKeys"
          :key="key"
        >
          <template v-slot:label>
            <i class="el-icon-user" />
            {{ desc }}
          </template>
          {{ tableData[key] }}
        </el-descriptions-item>
      </el-descriptions>
    </div>
  </div>
</template>

<style scoped>
h1,
h3 {
  margin-top: 20px;
  margin-bottom: 10px;
  text-align: center;
}
.result-container {
  padding: 5px 20px 10px;
  background-color: white;
}
</style>
